<template>
  <el-descriptions border direction="vertical" :column="9">
    <el-descriptions-item label="月份">{{ month }}月</el-descriptions-item>
    <el-descriptions-item
      v-for="(value, key) in DetailKey"
      :key="key"
      :label="value"
      >{{ detailValue[key] }}</el-descriptions-item
    >
    <el-descriptions-item label="操作">
      <el-button type="primary" @click="handleToException" plain size="small"
        >查看详情</el-button
      >
    </el-descriptions-item>
    <el-descriptions-item label="考勤状态">
      <el-tag :type="detailState.type" size="small">{{
        detailState.text
      }}</el-tag>
    </el-descriptions-item>
  </el-descriptions>
  <el-calendar v-model="data">
    <template #header>
      <el-button type="primary" @click="hanglePutTime">在线签到</el-button>
      <el-space>
        <el-button plain>{{ year }}年</el-button>
      </el-space>
      <el-select
        v-model="month"
        class="m-2"
        @change="handleChange"
        placeholder="Select"
        size="large"
      >
        <el-option
          v-for="item in 12"
          :key="item"
          :value="item"
          :label="item + '月'"
        />
      </el-select>
    </template>
    <template #date-cell="{ data }">
      <div>{{ renderDate(data.day) }}</div>
      <div class="show-time">{{ renderTime(data.day) }}</div>
    </template>
  </el-calendar>
</template>
<script setup lang="ts">
import { ref, reactive, computed, watchEffect } from "vue";
import { ElMessage } from "element-plus";
import { useStore } from "@/store";
import { toZero } from "@/utils/commit";
import router from "@/router";
const data = ref(new Date());
const store = useStore();

// 获取当前年份
const year = data.value.getFullYear();
const month = ref(data.value.getMonth() + 1);
//选择的月份
const handleChange = () => {
  data.value = new Date(`${year}.${month.value}`);
};
//定义考勤可能存在的状态
enum DetailKey {
  normal = "正常出勤",
  absent = "旷工",
  miss = "漏打卡",
  late = "迟到",
  early = "早退",
  lateAndEarly = "迟到并早退",
}
const detailValue = reactive({
  normal: 0,
  absent: 0,
  miss: 0,
  late: 0,
  early: 0,
  lateAndEarly: 0,
});
const detailState = reactive({
  type: "success" as "success" | "danger",
  text: "正常" as "正常" | "异常",
});

const signsInfos = computed(() => store.state.signs.infos);
const usersInfos = computed(() => store.state.users.infos);

// 将显示的日期进行分割，然后只保留day
const renderDate = (day: string) => {
  return day.split("-")[2];
};
// 后端接口/signs/time获取数据后，需要把打卡信息渲染到日历中
const renderTime = (day: string) => {
  const [, month, date] = day.split("-");
  const ret = (
    (signsInfos.value.time as { [index: string]: unknown })[month] as {
      [index: string]: unknown;
    }
  )[date];
  if (Array.isArray(ret)) {
    return ret.join("-");
  }
};
//在线签到调用函数
const hanglePutTime = () => {
  store
    .dispatch("signs/putTime", { userid: usersInfos.value._id })
    .then((res) => {
      if (res.data.errcode === 0) {
        store.commit("signs/updateInfos", res.data.infos);
        ElMessage.success("签到成功");
      }
    });
};
//查看详情
const handleToException = () => {
  router.push({
    path: "/exception",
    query: { month: month.value },
  });
};
watchEffect((reset) => {
  const detailMonth = (signsInfos.value.detail as { [index: string]: unknown })[
    toZero(month.value)
  ] as { [index: string]: unknown };
  for (const attr in detailMonth) {
    switch (detailMonth[attr]) {
      case DetailKey.normal:
        detailValue.normal++;
        break;
      case DetailKey.absent:
        detailValue.absent++;
        break;
      case DetailKey.miss:
        detailValue.miss++;
        break;
      case DetailKey.late:
        detailValue.late++;
        break;
      case DetailKey.early:
        detailValue.early++;
        break;
      case DetailKey.lateAndEarly:
        detailValue.lateAndEarly++;
        break;
    }
  }
  for (const attr in detailValue) {
    if (
      attr !== "normal" &&
      detailValue[attr as keyof typeof detailValue] !== 0
    ) {
      detailState.type = "danger";
      detailState.text = "异常";
    }
  }
  reset(() => {
    detailState.type = "success";
    detailState.text = "正常";
    for (const attr in detailValue) {
      detailValue[attr as keyof typeof detailValue] = 0;
    }
  });
});
</script>
<style scoped lang="scss">
.show-time {
  text-align: center;
  line-height: 40px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>
